<template>
  <ul>
    <li v-for="(question, index) in questions">
      <div class="item-box">
        <h5><strong>Q{{index+1}}</strong>{{question.question}}</h5>
        <div class="answer">
          <div v-if="question.type == 'text'">
            <input type="text" v-show="!submited">
            <span v-show="submited">{{question.result}}</span>
          </div>
          
          <div v-if="question.type == 'singleSelection'">
            <ul v-show="!submited">
              <li v-for="(item, i) in question.answers">
                <input type="radio" :name="question.question + index"  >{{item.answer}}
              </li>
              <li v-show="submited">
                
              </li>
            </ul>
            <ul  v-show="submited">
              <li v-for="(item, i) in question.result">
                {{question.answers[indexAndChar.indexOf(item)].answer}}
              </li>
            </ul>
          </div>
          
          <div v-if="question.type == 'MultipleSelection'">
            <ul v-show="!submited">
              <li v-for="item in question.answers">
                <input type="checkbox" :name="question.question + index">{{item.answer}}
              </li>
            </ul>
            <ul v-show="submited">
              <li v-for="(item, i) in question.result">
                {{question.answers[indexAndChar.indexOf(item)].answer}}
              </li>
            </ul>
          </div>
          

          <div v-if="question.type == 'custom'">
            <div v-if="question.hasAnswers">
              <!--如果是答案为考虑-->
            </div>
            <div v-else>
              <items :questions="question.answers"></items>
            </div>
          </div>

        </div>

      </div>
    </li>
  </ul>
</template>

<style>
  .answer {

    color: #666;
    padding-left: 20px;
  }
  .answer h5 {
    color: #000;
  }
</style>

<script>
  export default {
    name: 'items',
    data () {
      return {
        indexAndChar: ['A', 'B', 'C', 'D']
      }
    },
    computed: {
      submited () {
        return this.$store.state.submited
      }
    },
    props: ['questions']
  }
</script>